<template>
    <view class="main">
        <view class="list" v-for="(item, index) in friendList" :key="index">
            <view class="item">
                <view class="top dispaly-just-between">
                    <view class="title">新成员通知</view>
                    <view class="time">{{ item.createTime }}</view>
                </view>
                <view class="middle dispaly-center">
                    <view class="name">{{ item.nickName }}</view>
                    <view class="desc">加入</view>
                    <view class="name">{{ item.circleName }}</view>
                    <view class="desc">快去欢迎新成员吧！</view>

                </view>
                <view class="option">
                    <view class="btns dispaly-center">
                        <view class="btn one dispaly-align-center"
                            @click="$goUrl(`/pages/message/pages/detail1?data=${JSON.stringify(item)}`)">查看
                        </view>
                    </view>
                </view>
            </view>
        </view>
        <LoadMore />
    </view>
</template>

<script setup>
import { ref } from "vue";
import { getFriendPage, concatList } from "@/api/apiList";

const friendList = ref();
const friendListData = async () => {
    // const idList = []
    // if (uni.getStorageSync('userInfo').circleIds) {
    //     if (uni.getStorageSync('userInfo').circleIds.length) {
    //         uni.getStorageSync('userInfo').circleIds.forEach(item => {
    //             idList.push(item)
    //         })
    //     }
    // }
    const getFriendPageData = await concatList({ status: 1, pageSize: 9999, pageNum: 1, circleIds: uni.getStorageSync('userInfo').circleIds });
    if (getFriendPageData) {
        friendList.value = getFriendPageData?.rows;
    }
};
friendListData();
</script>

<style lang="scss" scoped>
.main {
    padding: 30rpx;

    .list {
        margin-bottom: 20rpx;

        .list:last-child {
            margin-bottom: 0;
        }

        .item {
            border-radius: 16rpx;
            background-color: #fff;
            padding: 20rpx;

            .top {
                .title {
                    font-family: PingFang SC Regular;
                    font-size: 32rpx;
                    font-weight: normal;
                    color: #111111;
                }

                .time {
                    font-family: PingFang SC Regular;
                    font-size: 24rpx;
                    color: #999999;
                }
            }

            .middle {
                border-bottom: 1rpx solid #eee;
                padding-bottom: 24rpx;

                .name,
                .desc {
                    font-family: PingFang SC Regular;
                    font-size: 26rpx;
                }

                .name {
                    color: #0753FD
                }

                .desc {
                    color: #111111
                }
            }

            .option {
                display: flex;
                margin-top: 20rpx;

                .btns {
                    .btn {
                        padding: 5rpx 38rpx;
                        border-radius: 8rpx;
                        font-family: PingFang SC Regular;
                        font-size: 30rpx;
                        color: #0753FD;
                        border: 1px solid #0753FD;
                    }
                }
            }
        }
    }
}
</style>